<template>
  <div v-show="showDesc" class="c-pz1003 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-justify-center c-aligni-end">
    <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeModal"></div>
    <article class="c-w100 c-bg-sgray c-flex-column c-p c-maxw640 c-p-l0 c-p-r0 c-pz1 c-br-tl20 c-br-tr20 c-fc-xblack c-hh920 c-pb100 c-contexty-auto">
      <div class="c-pa c-p-r20 c-p-t20 c-pz9 c-ww32 c-hh32 c-flex-row c-flex-center c-brp50 c-translucent-balck40" @click="closeModal">
        <i class="iconfont c-fs12 c-fc-white">&#xe8fd;</i>
      </div>
      <div v-if="descInfo" class="c-hh830 c-pb130 c-contexty-auto">
        <section class="cover-box c-bg-white">
          <img class="c-w100 c-h c-object-fit-cover" :src="descInfo.avatar" alt="">
        </section>
        <section class="c-ph24 c-pt24 c-fs26 c-fw-b c-bg-white">
          {{descInfo.name}}
        </section>
        <section class="c-ph24 c-pt12 c-pb24 c-fc-reword c-bd-b12 c-bg-white">
          ￥{{descInfo.price}}
        </section>
        <section class="c-ph24 c-pv24 c-fs24 c-fw-b c-bg-white">
          商品简介
        </section>
        <section class="c-fs20 c-ph24 c-bg-white">
          <div v-html="descHtml"></div>
        </section>
        <div @click="clickLookMore" class="c-pv24 c-fs22 c-flex-row c-flex-center c-fc-sblack c-bg-white">
          <span>查看更多商品详情</span>
          <i class="iconfont c-fc-sgray c-fs16 c-pl10">&#xe635;</i>
        </div>
      </div>
      <footer class="c-pa c-p-b0 c-p-l0 c-p-r0 c-bd-t2 c-bg-white c-flex-row c-aligni-center c-flex-center c-ph24 c-hh100">
        <div class="c-w100 c-hh60 c-br30 c-bg-xblue c-fc-white c-fs24 c-flex-row c-flex-center" @click="clickBuyNow">立即购买</div>
      </footer>
    </article>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
export default {
  name: "recommendDesc",
  components: {
  },
  props: {
  },
  data() {
    return {
      descInfo:null,
      descHtml: '',
      showDesc: false,
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    public_initDescData(info) {
      this.descInfo = info;
      this.showDesc = true;
      this.getHtmlInfo();
    },
    getHtmlInfo() {
      if (!this.descInfo.liveDescPath.includes('http')) {
        this.descHtml = this.descInfo.liveDescPath;
        return;
      }
      utilJs.getPageHtml(this.descInfo.liveDescPath, sres => {
        this.descHtml = sres;
      });
    },
    clickLookMore() {
      this.$emit('clickLookMore');
    },
    closeModal() {
      this.$emit('closeModal')
    },
    clickBuyNow() {
      this.showDesc = false;
      this.$emit('clickBuyNow')
    },
  }
}
</script>
<style scoped>
.cover-box{
  position: relative;
  width: 100%;
  height: 10.7rem;
  border-radius: 0.5rem 0.5rem 0 0;
  overflow: hidden;
}
</style>
